<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML+CSS实战项目入门级企业官网-首页</title>
  <link rel="stylesheet" href="./styles/reset.min.css">
  <link rel="stylesheet" href="./styles/about.min.css">
  <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4763580_3ewk9f8xtmu.css">
</head>

<body>
  <div id="app">
    <!-- 头部版块 -->
    <div class="header">
      <div class="wrapper">
        <div class="left">
          <a href="./index.html">
            <img src="./images/logo_white.png" class="logo">
          </a>
        </div>
        <div class="right">
          <ul class="nav">
            <li class="nav-item"><a href="./index.html">首页</a></li>
            <li class="nav-item"><a href="./case.html">最新案例</a></li>
            <li class="nav-item active"><a href="./about.html">关于我们</a></li>
            <li class="nav-item"><a href="./concat.html">联系我们</a></li>
          </ul>
        </div>
        <div class="collapse">
          <i class="iconfont icon-qita"></i>
          <ul class="nav">
            <li class="nav-item"><a href="./index.html">首页</a></li>
            <li class="nav-item"><a href="./case.html">最新案例</a></li>
            <li class="nav-item active"><a href="./about.html">关于我们</a></li>
            <li class="nav-item"><a href="./concat.html">联系我们</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 横幅版块 -->
    <div class="banner">
      <div class="content">
        <div class="title">独具匠心 专注品质</div>
        <div class="slogan">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et eaque, provident quibusdam
          reprehenderit architecto rem repellat quis mollitia dolore maxime.</div>
      </div>
    </div>
    <!-- 关于我们版块 -->
    <div class="about-us">
      <div class="wrapper">
        <div class="title">关于我们</div>
        <ul class="content">
          <li class="about-item">
            <img src="./images/a1.jpg" alt="">
            <div>
              <div class="title">Maoshu,创始人,CEO</div>
              <div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde temporibus odit iste sit ab assumenda! Consectetur, impedit omnis! Labore voluptatem officiis reprehenderit fuga odio voluptatum, magni optio eveniet nesciunt itaque, doloremque necessitatibus enim fugiat facere soluta architecto corrupti? Nostrum placeat ducimus vel architecto expedita quos soluta quas tempora rem veritatis aut officiis illum cum pariatur eaque esse, nemo modi? Id voluptatum molestias doloribus assumenda ea iure quaerat voluptate laborum? Libero dolorum pariatur rem voluptates ipsum eius, possimus facere praesentium consectetur!</div>
            </div>
          </li>
          <li class="about-item">
            <img src="./images/a2.jpg" alt="">
            <div>
              <div class="title">Maoshu,创始人,CEO</div>
              <div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde temporibus odit iste sit ab assumenda! Consectetur, impedit omnis! Labore voluptatem officiis reprehenderit fuga odio voluptatum, magni optio eveniet nesciunt itaque, doloremque necessitatibus enim fugiat facere soluta architecto corrupti? Nostrum placeat ducimus vel architecto expedita quos soluta quas tempora rem veritatis aut officiis illum cum pariatur eaque esse, nemo modi? Id voluptatum molestias doloribus assumenda ea iure quaerat voluptate laborum? Libero dolorum pariatur rem voluptates ipsum eius, possimus facere praesentium consectetur!</div>
            </div>
          </li>
          <li class="about-item">
            <img src="./images/a3.jpg" alt="">
            <div>
              <div class="title">Maoshu,创始人,CEO</div>
              <div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde temporibus odit iste sit ab assumenda! Consectetur, impedit omnis! Labore voluptatem officiis reprehenderit fuga odio voluptatum, magni optio eveniet nesciunt itaque, doloremque necessitatibus enim fugiat facere soluta architecto corrupti? Nostrum placeat ducimus vel architecto expedita quos soluta quas tempora rem veritatis aut officiis illum cum pariatur eaque esse, nemo modi? Id voluptatum molestias doloribus assumenda ea iure quaerat voluptate laborum? Libero dolorum pariatur rem voluptates ipsum eius, possimus facere praesentium consectetur!</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 尾部版块 -->
    <div class="footer">
      <div class="wrapper">
        <div class="title">联系我们</div>
        <div class="content">
          <div class="left">
            <ul class="qrcodes">
              <li class="qrcodes-item">
                <img src="./images/qrcode.jpg" alt="">
                <div>关注公众号</div>
              </li>
              <li class="qrcodes-item">
                <img src="./images/qrcode.jpg" alt="">
                <div>下载APP</div>
              </li>
            </ul>
            <ul class="links">
              <li class="links-item">QQ：2820XXXXXX</li>
              <li class="links-item">邮箱：2820XXXXXX@qq.com</li>
              <li class="links-item">微博：XXX</li>
              <li class="links-item">地址：湖南省长沙市XX区XX路XX号</li>
            </ul>
          </div>
          <div class="phone">
            <i class="iconfont icon-dianhua"></i>
            <span>152XXXXXXXX</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 版权版块 -->
    <div class="copyright">
      <div class="wrapper">Copyright &copy; 2024 XXX版权所有</div>
    </div>
  </div>
</body>
<script>
  const iconQita = document.querySelector('.icon-qita')
  const nav = document.querySelector('.collapse .nav')
  iconQita.addEventListener('click', function() {
    nav.style.opacity = nav.style.opacity === '0' ? '1' : '0'
  })
</script>
</html>